<template>
    <div class="box">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="account">
                <el-input v-model="ruleForm.account"></el-input>
            </el-form-item>
            <el-form-item label="用户名称" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-radio-group v-model="ruleForm.type">
                    <el-radio label="超级管理员(所有权限)" value="1"></el-radio>
                    <el-radio label="管理员(拥有部分权限)" value="2"></el-radio>
                    <el-radio label="观察员(只读权限)" value="3"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="账号描述" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add">确认</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">
import { $AddAccount } from '@/api'
import { defineComponent, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
export default defineComponent({
    name: 'AccForm',
    setup() {
        const router = useRouter()
        const Data = reactive({
            ruleForm: {
                account: '',
                username: '',
                type: '',
                desc: ''
            },
            rules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择用户类型', trigger: 'blur' }
                ]
            }
        })
       const add=()=> {
            $AddAccount(Data.ruleForm).then(res => {
                if (res.data.msg == "success") {
                    ElMessage({
                        message: '添加成功！',
                        type: 'success',
                    })
                    Data.ruleForm = {
                        account: '',
                        username: '',
                        type: '',
                        desc: ''
                    }
                    router.push('/account/accountlist')
                }
            })
        }
       const reset=()=> {
            Data.ruleForm = {
                account: '',
                username: '',
                type: '',
                desc: ''
            }
        }
        return { ...toRefs(Data) , add, reset }
    }
    // data() {
    //     return {
    //         ruleForm: {
    //             account: '',
    //             username: '',
    //             type: null,
    //             desc: ''
    //         },
    //         rules: {
    //             account: [
    //                 { required: true, message: '请输入账号', trigger: 'blur' },
    //                 { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
    //             ],
    //             username: [
    //                 { required: true, message: '请输入用户名', trigger: 'blur' },
    //                 { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
    //             ],
    //             type: [
    //                 { required: true, message: '请选择用户类型', trigger: 'blur' }
    //             ]
    //         }
    //     };
    // },
    // methods: {
    //     add() {
    //         $AddAccount(this.ruleForm).then(res => {
    //             if (res.data.msg == "success") {
    //                 this.$message.success('添加成功！');
    //                 this.ruleForm = {
    //                     account: '',
    //                     username: '',
    //                     type: null,
    //                     desc: ''
    //                 }
    //                 this.$router.push('/account/accountlist')
    //             }
    //         })
    //     },
    //     reset() {
    //         this.resetForm = {
    //             account: '',
    //             username: '',
    //             type: null,
    //             desc: ''
    //         }
    //     }
    // }
});
</script>

<style lang="less" scoped>
.box {
    background: #fff;
    padding: 30px;

    .el-form {
        width: 400px;
    }
}
</style>